<template>
{{lang}}
  <q-table
    title="Treats"
    :data="data"
    :columns="columns"
    row-key="Id"
    :loading="loading"
    :filter="filter"
    separator="cell"
    selection="multiple"
    :selected.sync="selected"
    :pagination.sync="pagination"
    :rows-per-page-options="[10, 50, 0]"
    @request="onRequest"
  >
    <template v-slot:top-right>
      <q-input
        v-if="show_filter"
        filled
        borderless
        dense
        debounce="300"
        v-model="filter"
        placeholder="Search"
      >
        <template v-slot:append>
          <q-icon name="search" />
        </template>
      </q-input>

      <q-btn
        class="q-ml-sm"
        icon="filter_list"
        @click="show_filter = !show_filter"
        flat
      />
    </template>
    <template v-slot:pagination>
      <q-pagination
        v-model="pagination.page"
        :max="12"
        color="primary"
        :max-pages="6"
        :direction-links="true"
        :boundary-links="true"
        @input="onRequest"
      />
    </template>
    <template v-slot:loading>
      <q-inner-loading showing color="primary" />
    </template>
  </q-table>
</template>

<script lang="ts">
import { defineComponent, PropType, computed, ref, toRef, Ref } from "vue";
import { Todo, Meta } from "components/models";
import { useQuasar } from 'quasar'
export default defineComponent({
  name: "CaseIndex",
  setup() {
    const $q = useQuasar()
    const lang = ref($q.lang.isoName)
    return {lang};
  },
});
</script>